/* =========================================================================
   Ajustes visuales de MawiBot sobre el tema SB Admin 2 (mawibot-2.min.css).
   Esta hoja carga DESPUÉS del tema, por eso casi nada necesita !important.
   ========================================================================= */

:root {
    --mw-verde: #00c052;
    --mw-verde-oscuro: #00a647;
    --mw-verde-suave: rgba(0, 192, 82, .14);
    --mw-navy: #132240;
    --mw-navy-oscuro: #00102f;
    --mw-lienzo: #eceff4;        /* fondo de la página: gris frío */
    --mw-borde: #dfe3ea;
    --mw-tinta: #1f2937;
    --mw-tinta-suave: #5b6472;
    --mw-sombra: 0 1px 2px rgba(19, 34, 64, .06), 0 6px 18px rgba(19, 34, 64, .07);
    --mw-sidebar-ancho: 14rem;
    --mw-topbar-alto: 4.375rem;
}

/* ---------- Tipografía ---------- */
body {
    font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 14px;
    color: var(--mw-tinta);
    font-variant-numeric: tabular-nums;
    background-color: var(--mw-lienzo);
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 600; }

/* ---------- Lienzo y tarjetas ---------- */
/* overflow-x:hidden del tema anula position:sticky; clip recorta sin crear scroll */
#wrapper #content-wrapper { background-color: var(--mw-lienzo); overflow-x: hidden; overflow-x: clip; }
.card { border-color: var(--mw-borde); }
.card.shadow, .shadow { box-shadow: var(--mw-sombra) !important; }
.card .card-header.bg-dark { border-bottom: 0; }
.card .card-header.bg-dark h6 { letter-spacing: .01em; }
.card .card-header .text-primary { color: var(--mw-navy) !important; }

/* ---------- Sidebar fija ---------- */
#wrapper { min-height: 100vh; }
.sidebar {
    position: sticky;
    top: 0;
    align-self: flex-start;       /* necesario para que sticky funcione dentro de flex */
    height: 100vh;
    min-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .25) transparent;
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .25); border-radius: 3px; }

.sidebar .sidebar-brand { flex: 0 0 auto; }
.sidebar .sidebar-brand-icon { font-size: 1rem; font-weight: 700; letter-spacing: .06em; }
.sidebar .sidebar-brand-icon::after {           /* el punto verde de la marca */
    content: ""; display: inline-block; width: .45rem; height: .45rem; margin-left: .3rem;
    border-radius: 50%; background: var(--mw-verde); vertical-align: .1rem;
}

.sidebar .nav-item .nav-link { transition: background-color .12s ease, color .12s ease; }
.sidebar .nav-item .nav-link span { font-weight: 600; }
.sidebar .nav-item .nav-link .row { align-items: center; }
.sidebar .nav-item .collapse .collapse-inner,
.sidebar .nav-item .collapsing .collapse-inner { background: #fff; }
.sidebar .nav-item .collapse-inner .collapse-item { transition: background-color .12s ease; }
.sidebar .nav-item .collapse-inner .collapse-item:hover { background-color: #f1f3f6; color: var(--mw-navy); }
.sidebar .nav-item .collapse-inner .collapse-item.active {
    color: var(--mw-navy);
    font-weight: 600;
    background-color: var(--mw-verde-suave);
    box-shadow: inset 3px 0 0 var(--mw-verde);
}

.classHover:hover, .classHover:hover i { color: var(--mw-verde) !important; background-color: var(--mw-navy-oscuro) !important; }

/* Crédito "By MAWI 2026" al pie de la barra: texto informativo, sin enlace */
.sidebar .sidebar-pie { margin-top: auto; padding-bottom: .75rem; }
.sidebar .sidebar-marca {
    display: flex; align-items: baseline; gap: .35rem;
    padding: .9rem 1.25rem .4rem;
    font-size: .8rem; color: rgba(255, 255, 255, .55);
    letter-spacing: .02em; user-select: none;
}
.sidebar .sidebar-marca-nombre { font-weight: 700; color: #fff; letter-spacing: .08em; }
.sidebar .sidebar-marca-anio { font-variant-numeric: tabular-nums; }
.sidebar.toggled .sidebar-pie { display: none; }
@media (max-width: 767.98px) {
    .sidebar .sidebar-marca { justify-content: center; padding-left: .5rem; padding-right: .5rem; }
}

/* ---------- Barra superior fija ---------- */
.topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    height: var(--mw-topbar-alto);
    border-bottom: 1px solid var(--mw-borde);
    box-shadow: 0 1px 0 rgba(19, 34, 64, .04) !important;
}
.topbar .usuario-boton {
    display: inline-flex; align-items: center; gap: .6rem;
    padding: .35rem .85rem .35rem .4rem !important;
    border: 1px solid var(--mw-borde);
    border-radius: 2rem;
    background: #fff;
    color: var(--mw-tinta) !important;
    transition: border-color .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.topbar .usuario-boton:hover, .topbar .usuario-boton:focus, .topbar .usuario-boton[aria-expanded="true"] {
    border-color: var(--mw-verde);
    background: #f6fbf8;
    box-shadow: 0 0 0 3px var(--mw-verde-suave);
}
.topbar .usuario-boton::after { display: none; }      /* quita el caret de Bootstrap, usamos el nuestro */
.topbar .usuario-avatar {
    text-transform: uppercase;
    width: 2.1rem; height: 2.1rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--mw-navy); color: var(--mw-verde);
    font-size: .8rem; font-weight: 700; letter-spacing: .04em;
}
.topbar .usuario-nombre { font-size: .95rem; font-weight: 600; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar .usuario-caret { font-size: .65rem; color: var(--mw-tinta-suave); }
.topbar .dropdown-menu { border-color: var(--mw-borde); }
.topbar .dropdown-item { font-size: .9rem; padding: .55rem 1rem; }
.topbar .dropdown-item:hover { background: var(--mw-verde-suave); color: var(--mw-navy); }
@media (max-width: 575.98px) { .topbar .usuario-nombre { display: none; } }

/* ---------- Tablas ---------- */
.table { color: var(--mw-tinta); }
.table th { font-weight: 600; color: var(--mw-tinta-suave); font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; }
.table-bordered td, .table-bordered th { border-color: var(--mw-borde); }
.table-striped tbody tr:nth-of-type(odd) { background-color: #f7f8fa; }
.table-hover tbody tr:hover, .table-striped tbody tr:hover { background-color: #eef7f1; }
.thead-light th { background-color: #f1f3f6; }

/* ---------- Botones, formularios, paginación ---------- */
.btn-green { background-color: var(--mw-verde) !important; border-color: var(--mw-verde) !important; color: #fff !important; }
.btn-green:hover, .btn-green:focus { background-color: var(--mw-verde-oscuro) !important; border-color: var(--mw-verde-oscuro) !important; }
.text-green { color: var(--mw-verde) !important; }
.btn-outline-secondary:hover { border-color: var(--mw-verde) !important; background-color: var(--mw-verde) !important; }

.form-control:hover { border-color: #c5ccd6; }
.form-control:focus { border-color: var(--mw-verde) !important; box-shadow: 0 0 0 3px var(--mw-verde-suave) !important; }

.page-link { color: var(--mw-navy) !important; border-color: var(--mw-borde); }
.page-link:hover { background-color: var(--mw-verde-suave); border-color: var(--mw-borde); }
.page-item.active .page-link { background-color: var(--mw-verde) !important; border-color: var(--mw-verde) !important; color: #fff !important; }
.paginacion-servidor a { color: var(--mw-navy); }

/* Foco visible con teclado */
a:focus-visible, button:focus-visible, .btn:focus-visible, .page-link:focus-visible {
    outline: 2px solid var(--mw-verde); outline-offset: 2px; box-shadow: none;
}

/* ---------- Dashboard: tarjetas KPI ---------- */
.card[class*="border-left-"] .text-xs { color: var(--mw-tinta-suave) !important; }
.card[class*="border-left-"] .h5 { font-size: 1.6rem; }
.card[class*="border-left-"] .fa-2x { color: #c3c9d3; }

/* ---------- Accesibilidad / movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media (max-width: 767px) {
    body { font-size: 12px; }
    .icon-nav { display: none !important; }
}